<script setup lang="ts">
import * as echarts from "echarts";
import { ref,onMounted,onBeforeUnmount } from "vue";
const value = ref("");
var myChart:any = null;
onMounted(async () => {
  var main:any =  document.getElementById("main")
  myChart = echarts.init(main);
  myChart.setOption({
    title: { text: "树状图", left: "center" },
    series: [
      {
        type: "pie",
        redius: "50%",
        data: [
          { name: "人脸面板", value: 30 },
          { name: "车辆道闸", value: 50 },
          { name: "智能电表", value: 50 },
          { name: "视频监控", value: 50 },
        ],
      },
    ],
  });
  var bottom:any = document.getElementById("bottom")
  myChart = echarts.init(bottom);
  myChart.setOption({
    title: {},
    xAxis: {
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
    yAxis: {
      y: [200, 400, 600, 800, 1000, 1200],
      max: 1200,
    },
    series: [
      {
        name: "销量",
        type: "bar",
        data: [200, 400, 800, 1000, 800, 400, 200, 200, 800, 400, 200, 200],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //颜色(渐变色)
            {
              offset: 0,
              color: "#005BEA",
            },
            {
              offset: 1,
              color: "#00C6FB",
            },
          ]),
        },
      },
    ],
  });
  var bottmoleft:any =  document.getElementById("bottmoleft")
  myChart = echarts.init(bottmoleft);
  myChart.setOption({
    tooltip: {},
    xAxis: {
      axisLine: {
        show: false, //是否显示y轴线
      },
      axisTick: {
        show: false, //是否显示短标记
      },
      splitLine: {
        //分割线
        show: false, //是否显示分割线
      },
      axisLabel: {
        show: false,
      },
    },
    yAxis: {
      data: ["40%", "48%", "55%", "65%", "88%", "98%"],
      axisLabel: {
        color: "rgb(185, 238, 248)",
      },
      position: "right",
      axisTick: {
        show: false, //是否显示短标记
      },
      axisLine: {
        show: false, //是否显示x轴线
      },
    },
    grid: { top: "5%", bottom: "5%", right: "20%" },
    series: [
      {
        type: "bar",
        barCategoryGap: "70%",
        showBackground: true,
        data: [0.4, 0.48, 0.55, 0.65, 0.88, 0.98],
        itemStyle: {
          color: function (params) {
            const colorList = [
              ["rgb(205, 204, 153)", "rgb(254, 154, 2)"],
              ["rgb(205, 204, 153)", "rgb(254, 154, 2)"],
              ["rgb(205, 204, 153)", "rgb(254, 154, 2)"],
              ["rgb(203, 0, 208)", "rgb(120, 5, 215)"],
              ["rgb(203, 0, 208)", "rgb(120, 5, 215)"],
              ["rgb(203, 0, 208)", "rgb(120, 5, 215)"],
            ];
            const colorItem = colorList[params.dataIndex];
            // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
            // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
            return new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: colorItem[0],
                },
                {
                  offset: 1,
                  color: colorItem[1],
                },
              ],
              false
            );
          },
        },
      },
    ],
  });
  var bottonright:any =  document.getElementById("bottonright")
  myChart = echarts.init(bottonright);
  myChart.setOption({
    grid: {
      height: "65%",
    },
    title: {},
    xAxis: {
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
    yAxis: {
      min: 100,
      max: 800,
      splitNumber: 10,
      minortick: {
        splitNumber: 10,
        length: 10,
      },
    },
    series: [
      {
        name: "销量",
        smooth: true,
        // symbol: 'circle',
        type: "line",
        data: [200, 250, 350, 450, 350, 480, 410, 510, 400, 450, 350, 440],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //颜色(渐变色)
            {
              offset: 0,
              color: "rgb(56, 64, 123)",
            },
            {
              offset: 1,
              color: "rgb(41, 157, 168)",
            },
          ]),
        },
      },
    ],
  });
});
const options = [
  {
    value: "1",
    label: "请选择",
  },
  {
    value: "2",
    label: "年度",
  },
  {
    value: "3",
    label: "季度",
  },
  {
    value: "4",
    label: "月度",
  },
];
onBeforeUnmount(()=>{
  myChart && myChart.clear();
  if (myChart != null) {
      myChart.dispose()
      myChart = null;
  }
  window.removeEventListener("resize", resize);
})
//页面改变重绘图表
var resize = ()=> myChart.resize();
window.addEventListener('resize',resize) 
</script>
<template>
  <div class="tenement_first">
    <header>
      <div class="box">
        <div class="left">
          <span class="text1"> 正常运行设备（台）</span> <br />
          <span class="text2">1,354</span>
        </div>
        <div class="right">
          <span> 查看 > </span>
        </div>
      </div>
      <div class="box">
        <div class="left">
          <span class="text1"> 年度累计缴费（元）</span> <br />
          <span class="text2">638,945.43</span>
        </div>
        <div class="right">
          <span>查看 ></span>
        </div>
      </div>
      <div class="box">
        <div class="left">
          <span class="text1"> 今日进出人数（人）</span> <br />
          <span class="text2">5,388</span>
        </div>
        <div class="right">
          <span>查看 ></span>
        </div>
      </div>
      <div class="box">
        <div class="left">
          <span class="text1">今日进出车辆（辆）</span> <br />
          <span class="text2">469</span>
        </div>
        <div class="right">
          <span>查看 ></span>
        </div>
      </div>
    </header>
    <main class="main">
      <div class="left">
        <div class="top">设备分类占比</div>
        <div class="bottom">
          <el-row id="main"></el-row>
        </div>
        <div class="yuan">
          <span>设备总数</span>
          <p>1354</p>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <span>物业缴费</span>
          <span>公共资源</span>
          <span>车辆缴费</span>
          <span>水电缴费</span>
          统计频度：
          <el-select v-model="value" class="m-2" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </div>
        <el-row id="bottom" style="width: 1190px; height: 386px"></el-row>
      </div>
    </main>
    <footer>
      <div class="left">
        <div class="top">设备报错原因分析</div>
        <div class="bottom">
          <div class="left1">
            <h3>类型</h3>
            <ul>
              <li>工厂用电</li>
              <li>工厂用煤</li>
              <li>员工充电</li>
              <li>日常照明</li>
              <li>设备未关</li>
              <li>光伏发电</li>
            </ul>
          </div>
          <div class="center">
            <h3>数量</h3>
            <ul>
              <li>1000</li>
              <li>950</li>
              <li>850</li>
              <li>750</li>
              <li>650</li>
              <li>600</li>
            </ul>
          </div>
          <div class="right1">
            <h3>占比</h3>
            <el-row
              id="bottmoleft"
              style="width: 400px; height: 200px"></el-row>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          设备报错次数统计
          <span
            >统计频度：
            <el-select v-model="value" class="m-2" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </span>
        </div>
        <div class="bottom">
          <el-row
            id="bottonright"
            style="
              width: 850px;
              height: 230px;
              position: absolute;
              top: 40px;
            "></el-row>
        </div>
      </div>
    </footer>
  </div>
</template>
<style scoped lang="scss">
.tenement_first {
  background: #fff;
  margin: 8px;
  margin-bottom: 0;
}
header {
  display: flex;
  margin-left: 20px;
}

.box {
  height: 115px;
  width: 335px;
  border: 1px solid;
  position: relative;
  margin-top: 20px;
  margin-left: 20px;
  border-color: rgba(215, 215, 215, 1);
}

.box .left {
  float: left;
}

.box .right {
  float: right;
}

.box .text1 {
  position: absolute;
  top: 15px;
  left: 30px;
  font-size: 20px;
}

.box .text2 {
  position: absolute;
  font-size: 36px;
  top: 50px;
  left: 30px;
}

.box .right span {
  position: absolute;
  bottom: 10px;
  right: 12px;
  color: blue;
}

#main {
  width: 450px;
  height: 250px;
  position: absolute;
  top: 93px;
  left: -66px;
}

main {
  margin-left: 20px;
  margin-top: 20px;
}

.main {
  display: flex;
}

.main .left {
  position: relative;
  width: 335px;
  height: 386px;
  margin-left: 20px;
  border: 1px solid;
  border-color: rgba(215, 215, 215, 1);
}

footer {
  display: flex;
  margin-left: 20px;
  margin-top: 20px;
  height: 100%;
}

footer .left {
  position: relative;
  width: 618px;
  height: 290px;
  margin-left: 20px;
  border: 1px solid;
  border-color: rgba(215, 215, 215, 1);
}

footer .left .top {
  padding-left: 30px;
  width: 618px;
  line-height: 58px;
  height: 58px;
  border-bottom: 1px solid rgba(215, 215, 215, 1);
}

footer .left .bottom {
  display: flex;
  justify-content: space-around;
  font-size: 12px;
}

footer .left .bottom .left1 {
  margin-top: 20px;
  margin-left: 20px;
}

footer .left .bottom .center {
  margin-top: 20px;
}

footer .left .bottom .right1 {
  margin-top: 20px;
}

footer .left .bottom .left1 li {
  margin-top: 15px;
}

footer .left .bottom .center li {
  margin-top: 15px;
}

footer .left .bottom .right1 h3 {
  text-align: center;
}
footer .right .top {
  padding-left: 30px;
  line-height: 58px;
  width: 919px;
  height: 58px;
  border-bottom: 1px solid rgba(215, 215, 215, 1);
}

footer .right .top span {
  /* margin-left: 100px; */
  float: right;
  margin-right: 10px;
}

footer .right {
  position: relative;
  width: 919px;
  height: 100%;
  margin-left: 20px;
  border: 1px solid;
  border-color: rgba(215, 215, 215, 1);
  display: flex;
  flex-direction: column;
  .bottom {
    flex: 1;
  }
}

.main .right {
  width: 1190px;
  height: 386px;
  margin-left: 20px;
  border: 1px solid;
  border-color: rgba(215, 215, 215, 1);
}

.main .right .top {
  border-bottom: 1px solid rgba(215, 215, 215, 1);
  height: 52px;
  line-height: 52px;
  width: 1190px;
}

.main .right .top span {
  display: inline-block;
  width: 167px;
  height: 52px;
  text-align: center;
  margin-left: 20px;
}

.main .left .top {
  text-align: center;
  width: 335px;
  line-height: 52px;
  height: 52px;
  border-bottom: 1px solid rgba(215, 215, 215, 1);
}

.yuan {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid;
  text-align: center;
  border-color: rgba(215, 215, 215, 1);
  /* line-height: 150px; */
  position: absolute;
  top: 156px;
  left: 98px;
  background-color: white;
}

.yuan span {
  position: absolute;
  top: 27px;
  left: 30px;
}

.yuan p {
  position: absolute;
  top: 62px;
  left: 42px;
}
</style>
